<template>
  <div>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <router-link to="goods/123"> 查看商品</router-link>
    <div class="head1">
    </div>
    <GSousuok></GSousuok>
    <div class="body1">
      <div class="box">
      <h2>多肉植物</h2>
      <div>
        <p class="p1">让空气更加清新</p>
        <p class="p2">Make the air fresher</p>
      </div>
    </div>
    </div>
    <ButtonTab :tabs="tabs" @itemKey="onItemKey" />
    <RowGoods></RowGoods>
  </div>
  <div class="dd"></div>
</template>

<script>

import ButtonTab from "../components/ButtonTab.vue";
import RowGoods from './Goods1.vue'
export default {
  name: "Home",
  data(){
    return {
      tabs:['全部','向日癸','绿萝','仙人掌']
    }
  },
  methods:{
    onItemKey(i){
      console.log('点击了:'+this.tabs[i])
    }
  },
  components:{
    ButtonTab,
    RowGoods
  },
  created() {
    document.title = '首页'
  }
}
</script>

<style scoped>
ButtonTab{
  display: flex;
  justify-content: space-between;
}
a{
  text-decoration: none;
}
.head1{
  position: -webkit-sticky;
  position: sticky;top: 0;
  background-color:white;
  display: flex;
  justify-content: space-between;
}
.body1{
  display:flex;
  align-items: start;
  flex-direction:column;
  width:100%;
  height:180px;
  background-size:100%;
  background-image:url("../assets/a.png");background-repeat:no-repeat;}
.body1 h2{
  margin-left: 50px;
  padding-top: 0 }
.body1 .p1{
  margin-left:50px;
  line-height: 15px;
  margin-top:5px
}
.box{
 position: absolute;
  top:70px
}
.body1 .p2{
  margin-left:50px;
  line-height: 0;
  margin-top: 10px;
  color:gray;
  font-size: 13px
}
.body1 img{
  top:17px;
  width:319px;
  height:153px;
  opacity:1;
}
.dd{
  width: 100%;
  height: 100px
}
</style>